<!-- Left popover content -->
<div id="popover-left" style="display:none;">
	<p>HTML for left popover</p>
</div>

<!-- Right popover content -->
<div id="popover-right" style="display:none;">
	<p>HTML for right popover</p>
</div>

<!-- Bottom popover content -->
<div id="popover-bottom" style="display:none;">
	<p>HTML for bottom popover</p>
</div>

<!-- Top popover content -->
<div id="popover-top" style="display:none;">
	<p>HTML for top popover</p>
</div>

<!-- Left popover button -->
<button type="button" class="btn pmd-ripple-effect btn-default popover-html pmd-btn-raised notification-trigger" data-trigger="hover" data-toggle="popover" data-placement="left" data-html="true" data-id="#popover-left">Left</button>

<!-- Top popover button -->
<button type="button" class="btn pmd-ripple-effect btn-default popover-html pmd-btn-raised notification-trigger" data-trigger="hover" data-toggle="popover" data-placement="top" data-html="true" data-id="#popover-top">Top</button>

<!-- Bottom popover button -->
<button type="button" class="btn pmd-ripple-effect btn-default popover-html pmd-btn-raised notification-trigger" data-trigger="hover" data-toggle="popover" data-placement="bottom" data-html="true" data-id="#popover-bottom">Bottom</button>

<!-- Right popover button -->
<button type="button" class="btn pmd-ripple-effect btn-default popover-html pmd-btn-raised notification-trigger" data-trigger="hover" data-toggle="popover" data-placement="right" data-html="true" data-id="#popover-right">Right</button>